<template>
	<view>
		<view class="header">
			<!-- <image class="erwema" src="https://img-blog.csdnimg.cn/20191231121218576.png"></image> -->
			<view style="display: flex;justify-content: center;">
				<uqrcode ref="uQRCode" :text="uQRCodeText" :size="150" />
			</view>
			<view class="order-price">邀请码: {{userInfo.mytuij}}</view>
		</view>
		<view class="pay-type">
			<view class="fenxxinx">
				<view class="jiange">
					<view>总收益</view>
					<view class="shuzhi">{{yaoQingData.zsy}}元</view>
				</view>
				<view class="jiange">
					<view>可提现</view>
					<view class="ketix">{{yaoQingData.ktx}}元</view>
				</view>
			</view>
			<view class="tixian">提现</view>
		</view>
		<view class="neirong">
			<view class="neirkuang">
				<view>邀请人数</view>
				<view class="shuzhi">{{yaoQingData.yqrs}}</view>
			</view>
			<view class="neirkuang">
				<view>提现记录</view>
				<view class="shuzhi">{{yaoQingData.txjl}}</view>
			</view>
			<view class="neirkuang">
				<view>分销订单</view>
				<view class="shuzhi">{{yaoQingData.fxdd}}</view>
			</view>
			<view class="neirkuang">
				<view>分享次数</view>
				<view class="shuzhi">{{yaoQingData.fxcs}}</view>
			</view>
		</view>
	</view>
</template>
<script>
export default{
	data(){
		return {
			yaoQingData: {},
			userInfo: {},
			uQRCodeText: ""
		}
	},
	onLoad() {
		
	},
	onShow() {
		this.userInfo = uni.getStorageSync('user_key');
		this.getYaoqing();
		
		setTimeout(() => {
			this.generateQRcode();
		}, 500)
	},
	
	methods:{
		generateQRcode() {
			this.uQRCodeText = this.userInfo.mytuij;
			this.$refs.uQRCode.reload();
		},
		getYaoqing() {
			uni.showLoading({
				title: "生成中...",
				mask: true,
			})
			
			uni.request({
				url: getApp().globalData.url + '/client/GetYaoqing',
				data: {
					id: this.userInfo.id,
				},
				method: "GET",
				header: {
					"Content-Type": "application/json"
				},
				success: (res) => {
					// console.log(res);
					if(res.data.code == 200) {
						this.yaoQingData = res.data.data;
						
					}
					uni.hideLoading();
				}
			})
			
		},
	}
}
</script>
<style>
	page{
		background: #f4f4f4;
	}
</style>
<style scoped lang="scss">
	.neirong{
		width: 690rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		.neirkuang{
			width: 270rpx;
			background: #ffffff;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			font-size: 27rpx;
			color: #2C405A;
			margin-bottom: 20rpx;
			.shuzhi{
				font-size: 40rpx;
				font-weight: bold;
				color: #2979FF;
			}
		}
	}
	.header {
		// height: 320rpx;
		background-color: #f4f4f4;
		position: relative;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 50rpx;

		.order-center {
			font-size: 26rpx;
			color: #111;
			position: absolute;
			// top: 20rpx;
			right: 30rpx;
		}

		.order-price {
			font-size: 30rpx;
			color: #ff0000;
			margin-top: 30rpx;
			font-weight: bold;
		}
		.erwema{
			width: 300rpx;
			height: 300rpx;
			margin-top: 30rpx;
		}

		.header-text-1 {
			color: #969696;
			font-size: 26rpx;
			margin-bottom: 19rpx;
		}

		.header-text-2 {
			color: #969696;
			font-size: 26rpx;

			text {
				color: #ff0000;
				padding: 0 10rpx;
			}
		}
	}
	.pay-type{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 670rpx;
		margin: 20rpx;
		background: #e2e7f0;
		padding: 20rpx;
		border-radius: 20rpx;
		.tixian{
			padding: 10rpx 20rpx;
			background: #ff0000;
			color: #fff;
			border-radius: 20rpx;
		}
		.fenxxinx{
			// margin-right: 20rpx;
			font-size: 25rpx;
			padding: 5rpx 20rpx;
			background: #ffffff;
			color: #7c7e83;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			.jiange{
				margin-right: 50rpx;
				.shuzhi{
					font-size: 30rpx;
					color: #ff007f;
				}
				.ketix{
					font-size: 30rpx;
					color: #5555ff;
				}
			}
		}
	}
</style>
